<template>
	<view class="mine">
		<view class="mine_head" v-if="loginStatus" @click="goToMy">
			<view class="mine_head_img">
				<image v-if="userInfo.avatar" style="border-radius: 100%;" :src="userInfo.avatar" mode="aspectFill"></image>
				<!--  #ifdef MP-WEIXIN -->
				<open-data v-else type="userAvatarUrl"></open-data>
				<!--  #endif -->
			</view>
			<view class="mine_head_des">
				<view class="name">{{ userInfo.nickName || '' }}</view>
				<view class="office">{{ userInfo.userType == '2' ? '会员' : '业主' }}</view>
			</view>
			<view v-if="userInfo.nickName" class="mine_item_icon moreImg"></view>
		</view>
		<view class="mine_head" v-else>
			<view class="mine_head_img">
				<!-- #ifdef H5 -->
				<image style="border-radius: 100%;" src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/header.png" mode="aspectFill"></image>
				<!--  #endif -->
				<!--  #ifdef MP-WEIXIN -->
				<open-data type="userAvatarUrl"></open-data>
				<!--  #endif -->
			</view>
			<view class="mine_head_des">
				<button type="default" :disabled="loginDisabled" open-type="getPhoneNumber" class="author-button" @getphonenumber="getPhoneNumber">授权/登录</button>
			</view>
			<view class="mine_item_icon moreImg"></view>
		</view>

		<view class="card">
			<view class="card_title">
				<view class="title">勋章墙</view>
				<view class="mine_item_icon moreImg" @click="allModel">查看全部</view>
			</view>
			<view class="card_list">
				<view class="card_list_item" :class="{ shadow: !item.noShadow }" v-for="(item, index) in cardList" :key="index" @click="make(item, item.delFlag)">
					<image :src="item.medalImgUrl" :class="{ gray: item.delFlag == 0 }" mode="aspectFit"></image>
					<view class="medal-name" style="font-size: 24rpx;">{{ item.medalName }}</view>
				</view>
			</view>
		</view>
		<view class="king-box"><touch-grid-navigate :list="list1" @click="goActivity"></touch-grid-navigate></view>
		<view class="mine_box" v-bind:class="{ 'king-more-four': upFour }">
			<view class="mine_item" v-for="(item, index) in list2" :key="index" @click="myActive(item)">
				<view class="mine_item_label" :style="{ backgroundImage: `url(${item.img})` }">{{ item.title }}</view>
				<view class="moreImg"></view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" style="z-index:999;"><uni-popup-model :modelList.sync="modelListA"></uni-popup-model></uni-popup>
		<uni-popup-slient ref="slient" :tip="title"></uni-popup-slient>
	</view>
</template>

<script>
import http, { customUrl, envVersion } from '@/common/request.js';
import bridgeApi from '@/common/rayBridgeSDK.js';
import { authorTodo } from '@/common/utils.js';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniPopup from '@/components/uni-popup/uni-popup-scroll.vue';
import uniPopupModel from '@/components/uni-popup/uni-popup-model.vue';
import uniPopupSlient from '@/components/uni-popup/uni-popup-dialog-silent.vue';
import { mapState } from 'vuex';
import TouchGridNavigate from '@/components/touch-grid-navigate/touch-grid-navigate.vue';
export default {
	onLoad() {},
	components: {
		uniIcons,
		uniPopup,
		uniPopupModel,
		uniPopupSlient,
		TouchGridNavigate
	},
	data() {
		return {
			date: {},
			diaryImg: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/home/banner1.png',
			name: '',
			mermberName: '',
			member: false,
			cardList: [],
			list1: [],
			cardWale: [],
			list: [],
			maleName: '',
			img: '',
			medalType: '',
			specialCont: '',
			modelListA: [],
			loginDisabled: false,
			title: '云课堂正在建设中，敬请期待。',
			upFour: false,
			list2: [
				{
					type: 'share',
					title: '我的分享',
					img: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/fenxiang.png',
					path: '../../personal/share'
				},
				{
					type: 'house',
					title: '我的房屋',
					img: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/house.png',
					path: '../../houseSetting/myHouse'
				},
				// {
				// 	type: 'active',
				// 	title: '我的活动',
				// 	img:
				// 		'//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/active.png',
				// 	path: '../../personal/active'
				// },
				//#ifdef H5
				// {
				// 	type: 'classRoom',
				// 	title: '我的课堂',
				// 	img: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/class.png',
				// 	path: '../../personal/classRoom'
				// },
				//#endif
				// {
				// 	type: 'aswer',
				// 	title: '我的问卷',
				// 	img:
				// 		'//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/question.png',
				// 	path: '../../personal/question'
				// },
				{
					type: 'message',
					title: '我的留言',
					img: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/message.png',
					path: '../../personal/myChart'
				}

				// {
				// 	type: 'message',
				// 	title: '我的消息',
				// 	img: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/message.png',
				// 	path: '../../personal/message'
				// }
			]
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.userInfo,
			loginStatus: state => state.loginStatus
		})
	},
	onPullDownRefresh() {
		this.getImage();
		this.modelList();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onShow() {
		this.getImage();
		this.modelList();
	},
	methods: {
		getPhoneNumber(e) {
			//埋点
			this.$umaTrackEvent('authorLogin', { source: '个人中心页' });
			this.loginDisabled = true;
			const { encryptedData, iv, errMsg } = e.detail;
			if (errMsg === 'getPhoneNumber:ok') {
				this.$store
					.dispatch('wxLogin')
					.then(code => {
						this.$store
							.dispatch('getPhoneNumber', { code, encryptedData, iv })
							.then(res => {
								if (res.code === 200) {
									if (!res.user.nickName) {
										uni.redirectTo({
											url: './author',
											animationType: 'pop-in',
											animationDuration: 200
										});
									} else {
										// #ifdef MP-WEIXIN
										authorTodo({
											type: 'userLocation',
											success: () => {
												// #endif
												const url = uni.getStorageSync('authorCallbackUrl') || '/pages/personal/index';
												uni.getLocation({
													type: 'gcj02',
													success: res => {
														this.$store.dispatch('getLocationByGPS', res).then(location => {
															this.reLaunchToTarget(url);
														});
													},
													fail() {
														this.reLaunchToTarget(url);
													}
												});
												// #ifdef MP-WEIXIN
											}
										});
										// #endif
									}
								}
								this.loginDisabled = false;
							})
							.catch(e => {
								uni.showToast({
									title: '授权失败',
									icon: 'none'
								});
								this.loginDisabled = false;
							});
					})
					.catch(e => {
						this.loginDisabled = false;
					});
			} else {
				this.loginDisabled = false;
			}
		},
		reLaunchToTarget(url) {
			uni.reLaunch({
				url,
				animationType: 'pop-in',
				animationDuration: 200,
				success() {
					uni.removeStorageSync('authorCallbackUrl');
				}
			});
		},
		getImage() {
			http('/api/sysIconInfo/appIndexGetList', {
				data: { iconLocation: 3, iconTerminal: 1 },
				method: 'GET'
			}).then(result => {
				let data = result.data || [];
				this.list1 = data;
				this.upFour = data.length > 4;
			});
		},
		modelList() {
			http('/api/cusUserInfo/getSysMedalGrantDetail', {
				data: {},
				method: 'GET'
			}).then(
				result => {
					let cardList = result.data || [];
					if (cardList.length > 8) {
						this.cardList = cardList.slice(0, 8);
					} else {
						http('/api/cusUserInfo/getSysMedalGrantInfoNotAvailable', {
							data: { type: '1' },
							method: 'GET'
						}).then(
							result => {
								let data = result.data || [];
								cardList = [...cardList, ...data];
								const cardListLength = cardList.length;
								if (cardList.length >= 8) {
									this.cardList = cardList.slice(0, 8);
								} else {
									this.cardList = [...cardList, ...this.getFixedMedal(8 - (cardListLength % 8))];
								}
							},
							result => {
								this.showLoading = false;
								uni.showToast({
									title: result.msg,
									icon: 'none'
								});
							}
						);
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		getFixedMedal(length) {
			const list = [];
			while (length--) {
				list.push({
					noShadow: true,
					medalName: '',
					medalImgUrl: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/empty_medal.png'
				});
			}
			return list;
		},
		goActivity({ iconType, iconName, sysPartnerInfo }) {
			let url = '';
			if (iconType == '5') {
				if (sysPartnerInfo) {
					const { appId, applicationPagesPath: path, partnerType } = sysPartnerInfo;
					if (partnerType === '1') {
						//埋点
						this.$umaTrackEvent('personalKings', {
							iconName,
							iconType,
							appId,
							appPath: path,
							source: '个人中心页'
						});
						wx.navigateToMiniProgram({
							appId,
							path,
							envVersion,
							extraData: { uid: this.userInfo.userId }
						});
					} else {
						//埋点
						this.$umaTrackEvent('personalKings', {
							iconName,
							iconType,
							webViewPath: path,
							source: '个人中心页'
						});
						this.toWebView(path);
					}
				}
				return;
			} else if (iconType == '3') {
				url = '../../personal/card';
			} else if (iconType == '1') {
				url = '../../personal/coupon';
			} else if (iconType == '2') {
				url = '../../personal/mySign';
			} else if (iconType == '4') {
				url = '../../personal/diray';
			}
			//埋点
			this.$umaTrackEvent('personalKings', {
				iconName,
				iconType,
				iconUrl: url,
				source: '个人中心页'
			});
			uni.navigateTo({
				url: url,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		allModel() {
			//埋点
			this.$umaTrackEvent('medalWall-more', { source: '个人中心页' });
			uni.navigateTo({
				url: '../../personal/medal',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		toWebView(url) {
			// #ifdef H5
			location.href = url;
			// #endif
			// #ifdef MP-WEIXIN
			uni.navigateTo({
				url: '/home/web_view?url=' + encodeURIComponent(url),
				animationType: 'pop-in',
				animationDuration: 200
			});
			// #endif
		},
		goToMy() {
			if (this.loginStatus) {
				//埋点
				this.$umaTrackEvent('enterPersonal', { source: '个人中心页' });
				uni.navigateTo({
					url: '../../personal/person',
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
		},
		tel(tel) {
			uni.makePhoneCall({
				phoneNumber: tel //仅为示例
			});
		},
		make(cont, tag) {
			const { medalId, medalName, medalLevel } = cont;
			//埋点
			this.$umaTrackEvent('viewMedal', {
				medalId,
				medalName,
				medalLevel,
				source: '个人中心页'
			});
			if (!medalId) {
				return;
			}
			this.$refs.popup.open();
			http('/api/sysMedalTask/medal/' + medalId, {
				data: {},
				method: 'GET'
			}).then(
				result => {
					let data = result.data || [];
					if (tag != 0) {
						const currentLevels = [];
						data.forEach(item => {
							if (item.medalLevel <= medalLevel) {
								currentLevels.push(item);
								// this.modelListA = [item];
							}
						});
						this.modelListA = currentLevels;
					} else {
						this.modelListA = data;
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		myActive({ type, title, path }) {
			//埋点
			this.$umaTrackEvent('kings', { type, title, path, source: '个人中心页' });
			if (type === 'house') {
				http('/api/mdmCustomerRoom/getToken', {
					method: 'GET'
				}).then(res => {
					if (res.code === 200) {
						const token = res.data.accessToken || '';
						let params = `token=${token}`;
						const location = uni.getStorageSync('location');
						if (location) {
							params += `&adcode=${location.cityCode}&cityName=${location.cityName}`;
						}
						this.toWebView(`${customUrl.bindHouseHost}/h5/myHouse/myHouse?${params}`);
					} else {
						uni.showToast({
							title: '出现异常，无法访问！',
							icon: 'none'
						});
					}
				});
			} else {
				uni.navigateTo({
					url: path,
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
		}
	}
};
</script>

<style scoped lang="less">
page {
	background: #f7f7f7;
}

/deep/.uni-popup__wrapper-box {
	position: absolute !important;
	left: 40rpx;
	right: 40rpx;
}
.mine {
	.mine_head {
		padding: 40rpx 24rpx;
		align-items: center;
		margin: 36rpx 28rpx;
		background: #fff;
		border-radius: 12rpx;
		display: flex;
		box-shadow: 0 4rpx 20rpx 0 rgba(102, 100, 93, 0.1);
		.mine_head_img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 24rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.mine_head_des {
			display: flex;
			flex-flow: column;
			flex-grow: 1;
			.name {
				font-size: 32rpx;
				font-weight: 400;
				color: #66645d;
				line-height: 45rpx;
			}
			.office {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(102, 100, 93, 0.5);
				line-height: 40rpx;
			}
			.author-button {
				font-size: 32rpx;
				color: rgba(102, 100, 93, 1);
				margin: 0;
				padding: 0;
				display: inline-block;
				width: 160rpx;
				background-color: transparent;
				text-align: left;
				line-height: 1.2;
				text-decoration: underline;

				&::after {
					border: none;
				}

				&.user-info {
					width: 220rpx;
				}
			}
		}
		.mine_item_icon {
			height: 24rpx;
			width: 24rpx;
			background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/arrow-right.png) center center no-repeat;
			background-size: auto 24rpx;
			background-position: right 0;
		}
	}
	.card {
		background: #fff;
		padding: 24rpx 28rpx 36rpx 28rpx;
		position: relative;
		.card_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #66645d;
			.title {
				font-size: 36rpx;
				font-weight: 400;
				line-height: 50rpx;
			}

			.mine_item_icon {
				font-size: 24rpx;
				font-weight: 400;
				color: #66645d;
				line-height: 33rpx;
				&.moreImg {
					padding-right: 20rpx;
					background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/arrow-right.png) center center no-repeat;
					background-size: auto 24rpx;
					background-position: right 4rpx;
				}
			}
		}
		.card_list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.card_list_item {
				width: 25%;
				color: #66645d;
				margin-top: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				&.shadow {
					background: url(https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/medal_shadow.png) center no-repeat;
					background-size: auto 100%;
				}
				// .gray {
				// 	filter: grayscale(1);
				// 	filter: gray;
				// }
				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 12rpx;
				}
				.medal-name {
					font-size: 20rpx;
					font-weight: 400;
					color: #66645d;
					height: 28rpx;
					line-height: 28rpx;
					width: 120rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					text-align: center;
				}
			}
		}
	}
	.king-box {
		background-color: #fff;
		margin-top: 17rpx;
		padding: 4rpx 26rpx;
		/deep/.grid {
			.grid-border {
				margin: 0;
				.text {
					margin-top: 8rpx;
				}
			}
			.bottom {
				margin-top: 10rpx;
			}
		}
	}
	.mine_box {
		background-color: #fff;
		margin-bottom: 30rpx;
		&.king-more-four {
			margin-top: 16rpx;
		}
		.mine_item {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 99rpx;
			margin: 0 28rpx;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 2rpx;
				transform: scaleY(0.5);
				background-color: rgba(102, 100, 90, 0.1);
			}
			&:last-child {
				border: none;
			}
			.moreImg {
				width: 20rpx;
				height: 28rpx;
				background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/arrow-right.png) center center no-repeat;
				background-size: auto 100%;
				background-position: right center;
			}
			.mine_item_label {
				flex-grow: 1;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #66645d;
				background-size: 30rpx 28rpx;
				padding-left: 42rpx;
				background-repeat: no-repeat;
				background-position: left 6rpx;
				line-height: 42rpx;
			}
			.mine_item_icon {
				flex-shrink: 0;
				text-align: right;
			}
		}
	}
}
</style>
